﻿<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"/><!--用IE的最高版本浏览网页，以防低版本IE不支持部分css3属性-->
		<title>工程界-播放视频</title>
		<meta name="viewport" content="width=device-width,initial-scale=1"/><!--意思是使网页的宽度强制适应不同服务窗口的宽度（宽度自适），且用户不能够随意缩放网页-->
		<meta name="description" content=""/><!--关键字的描述内容(description)-->
		<meta name="keywords" content=""><!--关键字(keywords)-->
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
		<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />	
		<link rel="stylesheet" type="text/css" href="css/free-course3.css"/>
		<link rel="stylesheet" type="text/css" href="css/video-js.css">
		<!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>-->
		<!--<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>-->
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<!--<script type="text/javascript" src="js/free-course3.js"></script>-->
		<script type="text/javascript" src="cookie.js"></script>
  		<script type="text/javascript" src="js/video.js"></script>  		
  		<script>
    		videojs.options.flash.swf = "video-js.swf";
  		</script>
		<!--<script type="text/javascript" src="js/cookie.js" ></script>-->

</head>
	<body>
		<div id="main">
			<div class="course-hd">
				<div class="commWidth">
					<div class="nav-box">
						<div class="course-nav-hd clearfix">							
							<span class="blod"><a href="javascript:;">全部课程</a></span> 
							>
							<span class="step"><a href="javascript:;">电子信息</a></span>
							>
							<span class="step"><a href="javascript:;">高等数学</a></span>
							>
							<span class="step"><a href="javascript:;">免费</a></span>
							>
							<span class="step"><a href="javascript:;">单个视频</a></span>
							<div class="module-warp fr">
								<a href="course.html" class="module">视频专区</a>
								<a href="uploadMedia.html" class="module">视频上传</a>
							</div>
							<!-- <div class="login-user">
								<span>你猜猜你是谁</span>
			           			<a href="javascript:;" class="out-user">
			           				<img src="" alt="" />
			           				<div class="out-msg">
			           					<span>点击退出</span>
			           				</div>
			           			</a>			           			
			           		</div> -->
						<div class='search-warp clearfix'>
			            	<div class="search-area min" data-search="top-banner">
			               	 	<input class="search-input"  placeholder="请输入想搜索的内容..." type="text" autocomplete="off">
			               	 	<ul class="search-result" style="display: none;">
			               	 		<li>高等数学</li>
			               	 		<li>大学物理</li>
			               	 		<li>高等数学</li>
			               	 		<li>大学物理</li>
			               	 		<li class="case">清空搜索选项</li>
			               	 	</ul>
			            	</div>
			           		<div class='showhide-search' data-show='no'>
			           			<i class='icon-search'></i>
			           		</div> 
			           		
			        	</div>		
						</div>
					</div>
				</div>
			</div>
			<div class="studentMain">
				<div class="video-content">
					<div class="video-warp" style="width: 100%; height: 460px;">
						<div class="course-video-box">							
							<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="100%" height="460"
							      poster=""
							      data-setup="{}" >
							    <source src="video.mp4" type='video/mp4' id="video"/>
							    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
							    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
							    </video>
						</div>
					</div>
					<div class="video-list">
						<div class="text-right">
							<h2>微积分第一课</h2>
								<div class="score clearfix">
									<span>综合评分</span>								
									<div class="fivestars" id="fivestars">
									<div class="autostars" id="autostars" style="width:70px">
									</div>
								</div>
								</div>
								<div class="text-msg">
									<span class="frequency"> 播放 <em>65</em> 万次 </span>
									<span class="collect">收藏 <em> 30</em></span>
								</div>
							<span class="prices">免费</span>
							<p>我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介我是简介</p>
							<span class="free-go">去评价</span>
						</div>
						<ul class="open">
							<li class="aaa"></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="commWidth">
				<div class="course-price free-course clearfix">
					<div class="price-left fl">
						<div class="price-left-tab">
							<ul>
								<li class="abstract active">简介</li>
								<li>章节</li>
								<li class="evaluation">评论 (<em>9</em>) </li>
							</ul>
						</div>
						<div class="price-left-content">
							<div class="price-left-bd"style="display: block;">
								<p class="price_1">我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介</p>
								<p class="price_2">我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介，我我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，我是简介啊简介啊简介，是简介啊简介啊简介我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介，，我是简介啊简介啊简介我是简介啊简介啊简介，我是简介啊简介啊简介我是简介啊简介啊简介。</p>
							</div>
							<div class="price-left-bd"style="display: none;">
									<div class="task-chapter">
										<h3>第一章 : 微积分</h3>
										<div class="task-part-list">											
											<a href="video.html">
												<div class="task-part-item">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第一节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">免费</span>
												</div>
											</a>
											<a href="video.html">
												<div class="task-part-item">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第二节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">免费</span>
												</div>
											</a>
											<a href="video.html">
												<div class="task-part-item">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第三节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">免费</span>
												</div>
											</a>
											<a href="video.html">
												<div class="task-part-item">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第四节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">免费</span>
												</div>
											</a>
										</div>
									</div>
									<div class="task-chapter">
										<h3>第二章 : 微积分</h3>
										<div class="task-part-list">											
											<a href="video.html">
												<div class="task-part-item">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第一节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">免费</span>
												</div>
											</a>
											<a href="video.html">
												<div class="task-part-item">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第二节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">免费</span>
												</div>
											</a>
											<a href="video.html">
												<div class="task-part-item task-disable" data-task ="one">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第三节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">付费</span>
												</div>
											</a>
											<a href="video.html">
												<div class="task-part-item task-disable" data-task ="one">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第四节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">付费</span>
												</div>
											</a>
											<a href="video.html">
												<div class="task-part-item task-disable" data-task ="one">
													<i class="task-part-icon"></i>
													<p class="task-part-msg">
														<span class="chapter">第五节</span>
														<span class="chapter-name">微积分的由来</span>
													</p>
													<span class="task-msg">付费</span>
												</div>
											</a>
										</div>
									</div>
									<div  class="task-more">
										<span>点击加载更多</span>
									</div>
							</div>
							<div class="price-left-bd" style="display: none;">
								<div class="comment-box">
									<div class="pl-input-warp">
									<textarea name="" rows="" cols="" placeholder="你看看你想说点啥子就可以说点啥子......." class="textarea"></textarea>
								<span class="num-limit">
								<em class="pl-limit">0</em>
								/300     
								</span>   
								</div>
						<div class="input-btm">
							<input type="button" value="发表评论" class="input-btn-pl" />
						</div>
									<div class="comment-msg">															
										<div class="comment-tips clearfix">
											<div class="comment-user fl">
												<a class="comment-tips-user"><img src="img/comment_user.png" alt="" /></a>
												<span>王大力</span>
											</div>
											<div class="comment-tips-msg fl">												
												<div class="comment-tips-title">我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，</div>
												<ul class="comment-part">
													<li class="comment-list">
														<span class="time">2016-9-3</span>
														<span class="date">15:31</span>
													</li>
												</ul>
											</div>
											<div class="actions">
												<span class="actions-icon"></span>
												<em>10</em>
											</div>
										</div>
										<div class="comment-tips clearfix">
											<div class="comment-user fl">
												<a class="comment-tips-user"><img src="img/comment_user.png" alt="" /></a>
												<span>王大力</span>
											</div>
											<div class="comment-tips-msg fl">												
												<div class="comment-tips-title">我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，</div>
												<ul class="comment-part">
													<li class="comment-list">
														<span class="time">2016-9-3</span>
														<span class="date">15:31</span>
													</li>
												</ul>
											</div>
											<div class="actions">
												<span class="actions-icon"></span>
												<em>10</em>
											</div>
										</div>
										<div class="comment-tips clearfix">
											<div class="comment-user fl">
												<a class="comment-tips-user"><img src="img/comment_user.png" alt="" /></a>
												<span>王大力</span>
											</div>
											<div class="comment-tips-msg fl">												
												<div class="comment-tips-title">我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，</div>
												<ul class="comment-part">
													<li class="comment-list">
														<span class="time">2016-9-3</span>
														<span class="date">15:31</span>
													</li>
												</ul>
											</div>
											<div class="actions">
												<span class="actions-icon"></span>
												<em>10</em>
											</div>
										</div>
										<div class="comment-tips clearfix">
											<div class="comment-user fl">
												<a class="comment-tips-user"><img src="img/comment_user.png" alt="" /></a>
												<span>王大力</span>
											</div>
											<div class="comment-tips-msg fl">												
												<div class="comment-tips-title">我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，我是评论课程很好超级好，</div>
												<ul class="comment-part">
													<li class="comment-list">
														<span class="time">2016-9-3</span>
														<span class="date">15:31</span>
													</li>
												</ul>
											</div>
											<div class="actions">
												<span class="actions-icon"></span>
												<em>10</em>
											</div>
										</div>
										<div class="comment-btn">
											<span>点击加载更多</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="price-right fl">
						<h4 class="">个人介绍</h4>
						<div class="user-info clearfix">
							<a href="javascript:;"><img src="img/user_msg.png" alt="" /></a>
							<div class="user-info-right fl">
								<div class="user-msg">
									<a href="" class="user">彭于晏</a>
									<a class="follow">+ 关注</a>
								</div>
								<span class="video">视频 <em>9</em></span>
								<span class="fans">粉丝 <em>199</em></span>
							</div>
						</div>
						<div class="user-info-tip">
							<p>这是一个我的自我介绍，这是一个我的自我介绍，这是一个我的自我介绍，这是一个我的自我介绍，这是一个我的自我介绍,这是一个我的自我介绍，这是一个我的自我介绍，这是一个我的自我介绍，这是一个我的自我介绍，这是一个我的自我介绍</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div>
				<span>请使用者仔细阅读工程界 用户协议 和 隐私政策</span>
				<span><a href="javascript:;">网络违法犯罪举报网站</a></span>
				<span><a href="javascript:;">中国互联网发和不良信息举报中心</a></span>
			</div>
			<p>沪ICP证00099903号</p>
			<p>Coperight©2015-2020engineeringcircle.com All Right Reserved</p>
		</div>
  <script type="text/javascript">
 
videojs("example_video_1").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
    //myPlayer.play();
//myPlayer.currentTime(12);
//console.log(myPlayer.currentTime());
});

//模拟取得视频源数据
var videoSourceId = 1001;
//舒心Cookie进度的时间间隔
var refreshTrackInterval = 1000;
//刷新Cookie进度的方法
var refreshTrack = function () {
	//alert("1");
	if (myPlayer != null) {
//		var currentTime = myPlayer.currentTime();
//		//以视频源ID为索引 为videoTack数组赋予时间
//		setVideoTrack(videoSourceId,currentTime);
	}
	//alert("2");
	
	//console.log(videoTrack[videoSourceId]);
	//console.log(currentTime);
	
}

//存储Cookie中的videoTrack对象 解释：Track跟踪 
var videoTrack = {
}
//先定义为空
var myPlayer = null;
videojs("example_video_1").ready(function(){
	//在初始化视频组件后赋值
	myPlayer = this;
	console.log(myPlayer.currentTime);
	//获取Cookie中的视频进度 并在视频组件初始化后跳转进度
	//console.log(getVideoTrack("videoTrack"));
	var videoTrack = getVideoTrack("videoTrack");
	var trackTime = null;
	if (videoTrack != null) {
		trackTime = videoTrack[videoSourceId]
	}

	//console.log(trackTime);
	//跳转进度
	//myPlayer.currentTime(trackTime);
	//alert("3");
	
});
//alert("4");
 //function轮流执行
 setInterval(refreshTrack,refreshTrackInterval);




//	videojs.PowerOff = videojs.Button.extend({
//            /* @constructor */
//             init: function(player, options){
//
//               videojs.Button.call(this, player, options);
//               //onClick为默认事件，不需要人为邦定，否则会调两次
//               //this.on('click', this.onClick);
//             }
//           });
//
//          /* This function is called when X button is clicked */
//          videojs.PowerOff.prototype.onClick = function() {
//             // console.log('ddd')
//              //这里添加做你想要干的事情   
//              var oSpan=document.getElementById("video-definition");
//              alert(oSpan);
//              //oSpan.getElementById("span").innerHTML(this.innerHTML());
//          };
//
//           /* Create X button */
//           var createPowerOffButton = function() {
//             var props = {
//                 className: 'vjs-off-button vjs-control',
//                // innerHTML: '<div class="vjs-control-content" id="video-definition"><span>清晰度</span><ul class="video-definition"><li>超清</li><li>高清</li><li>普清</li></ul></div>',
//                 role: 'button',
//                 'aria-live': 'polite',
//                 tabIndex: 0
//               };
//
//             return videojs.Component.prototype.createEl(null, props);
//           };
//
//          /* Add X button to the control bar */
//          var X;
//           videojs.plugin('PowerOff', function() {
//             var options = { 'el' : createPowerOffButton() };
//             X = new videojs.PowerOff(this, options);
//             this.controlBar.el().appendChild(X.el());
//           });
//           
//           
//
//						var player = videojs("example_video_1", {
//						      plugins : { PowerOff : {} }
//						}, function(){
//						    
//						});


</script>
	</body>
</html>
